<!-- 账户设置 -->
<template>
    <div class="rightCenter">
        <div class="editTop">
            <div class="editTopTitle" @click="cancelClick()">业务主管理</div>
            <i class="icon font_family icon-yema-you"></i>
            <div class="editTopTitle">{{titleVal}}</div>
        </div>
        <div class="editList" v-show="titleVal == '编辑业务主'">
            <div class="editListName">
                业务主id：
            </div>
            <div class="editListInpFont">
                {{idVal}}
            </div>
        </div>
        <div class="editList">
            <div class="editListName">
                业务主名称：
            </div>
            <input class="editListInpBox" v-model.trim='designationVal' type="text" placeholder="请输入15个字符以内的名称" maxlength="15">
            <span class="warn" v-show='designationShow'>请输入15个字符以内的名称</span>
        </div>
        <div class="editList">
            <div class="editListName">
                业务主简介：
            </div>
            <textarea id="textId" class="textBox" v-model.trim='briefVal' @input='textHeigth()' maxlength="200" placeholder="请输入200字以内的简介"></textarea>
            <span class="warn" v-show='briefShow'>请输入200字以内的简介</span>
        </div>
        <div class="editList">
            <div class="editListName">
                账号
            </div>
            <input class="editListInpBox" v-model.trim='numVal' type="text" placeholder="请输入15个字符以内的名称" maxlength="15">
            <span class="warn" v-show='numShow'>请输入15个字符以内的名称</span>
        </div>
        <div class="editList" v-show='titleVal == "新增业务主"'>
            <div class="editListName">
                密码
            </div>
            <input class="editListInpBox" v-model.trim='passwordVal' type="password" placeholder="请输入8-16位数字字母组合" oninput="value=value.replace(/[^a-zA-Z0-9]/ig,'')"
                maxlength="16">
            <span class="warn" v-show='passwordShow'>请输入8-16位数字字母组合</span>
        </div>
        <div class="editList" v-show='titleVal == "新增业务主"'>
            <div class="editListName">
                确认密码：
            </div>
            <input class="editListInpBox" v-model.trim='passwordsVal' type="password" placeholder="请输入8-16位数字字母组合" oninput="value=value.replace(/[^a-zA-Z0-9]/ig,'')"
                maxlength="16">
            <span class="warn" v-show='passwordsShow'>两次密码不一致，请重新输入</span>
        </div>
        <div class="editList">
            <div class="editListName">
                姓名：
            </div>
            <input class="editListInpBox" v-model.trim='nameVal' type="text" placeholder="请输入真实姓名" maxlength="16">
            <span class="warn" v-show='nameShow'>请输入真实姓名</span>
        </div>
        <div class="editList">
            <div class="editListName">
                手机号：
            </div>
            <input class="editListInpBox" v-model.trim='phoneVal' type="text" placeholder="请输入11位手机号码" oninput="value=value.replace(/[^0-9]/ig,'')"
                maxlength="11">
            <span class="warn" v-show='phoneShow'>请输入11位手机号码</span>
        </div>
        <!-- <div class="checkList">
            <div class="checkName">
                权限配置：
            </div>
            <ul class="checkUl">
                <li class="checkLi">
                    <div class="checkBox">
                        <div :class="{checkBack:!activityShow,checkOkBack:activityShow}" @click='activityClick()'>
                            <div v-show='activityShow' class="checkBor"></div>
                        </div>
                        活动管理
                    </div>
                </li>
            </ul>
        </div> -->
        <div class="foot">
            <div class="addButton" @click="addClick()">
                保 存
            </div>
            <div class="cancelButton" @click="cancelClick()">
                取 消
            </div>
        </div>

    </div>
</template>
<script>
import taskRequest from "../../assets/task";
const crypto = require("crypto");
export default {
  components: {},
  data() {
    return {
      titleVal: "新增业务主", //模块名
      idVal: "", //业务主id
      designationVal: "", //名称
      designationShow: false, //名称
      briefVal: "", //简介
      briefShow: false, //简介
      numVal: "", //账号
      numShow: false,
      passwordVal: "", //密码
      passwordShow: false,
      passwordsVal: "", //确认密码
      passwordsShow: false,
      nameVal: "", //姓名
      nameShow: false,
      phoneVal: "", //手机
      phoneShow: false
    };
  },
  filters: {},
  created: function() {
    let self = this;
    if (sessionStorage.getItem("TABLIST")) {
      let arr = JSON.parse(sessionStorage.getItem("TABLIST"));
      let routShow = false;
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].name == "业务主管理") {
          routShow = true;
        }
      }
      if (!routShow) {
        this.$router.push({
          path: "/login"
        });
        sessionStorage.clear();
        self.$message("暂无权限");
        return;
      }
    } else {
      this.$router.push({
        path: "/login"
      });
      sessionStorage.clear();
      self.$message("暂无权限");
      return;
    }
    if (self.$route.query.button == "add") {
      self.titleVal = "新增业务主";
    } else {
      self.titleVal = "编辑业务主";
      taskRequest
        .providerInfoFun({
          providerId: self.$route.query.id
        })
        .then(data => {
          if (data.statusCode == 200) {
            self.idVal = data.data.id;
            self.designationVal = data.data.name;
            self.briefVal = data.data.desc;
            self.numVal = data.data.account;
            self.nameVal = data.data.realName;
            self.phoneVal = data.data.mobile;
          } else {
            self.$message(data.statusMessage);
          }
        })
        .catch(msg => {
          self.$message("服务器异常");
        });
    }
  },
  watch: {
    //  $route: "fetchData"
  },
  methods: {
    //返回
    cancelClick() {
      this.$router.push({
        path: "/home/business"
      });
    },
    //保存新密码
    addClick() {
      let self = this;
      if (self.designationVal == "") {
        this.designationShow = true;
        return;
      } else {
        this.designationShow = false;
      }
      if (self.briefVal == "") {
        this.briefShow = true;
        return;
      } else {
        this.briefShow = false;
      }
      if (self.numVal == "") {
        this.numShow = true;
        return;
      } else {
        this.numShow = false;
      }
      if (self.$route.query.button == "add") {
        let reg = new RegExp("^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z_]{8,16}$");
        if (self.passwordVal.length < 8) {
          self.passwordShow = true;
          return;
        } else {
          if (reg.test(self.passwordVal)) {
            self.passwordShow = false;
          } else {
            self.passwordShow = true;
            return;
          }
        }
        if (self.passwordVal != self.passwordsVal) {
          self.passwordsShow = true;
          return;
        } else {
          self.passwordsShow = false;
        }
      }
      if (self.nameVal == "") {
        this.nameShow = true;
        return;
      } else {
        this.nameShow = false;
      }
      var phoneReg = /^1[3|4|5|6|8|9|7][0-9]\d{8}$/; //输入手机号码
      if (phoneReg.test(self.phoneVal)) {
        self.phoneShow = false;
      } else {
        self.phoneShow = true;
        return;
      }
      let obj = {};
      let possible = self.passwordsVal;
      let shaCode = crypto.createHash("md5");
      let md5Str = shaCode.update(possible, "utf-8").digest("hex");
      if (self.$route.query.button == "add") {
        obj = {
          account: self.numVal, //账号
          desc: self.briefVal, //简介
          mobile: self.phoneVal, //手机
          name: self.designationVal, //名称
          password: md5Str, //密码
          realName: self.nameVal //姓名
        };
      } else {
        obj = {
          id: self.$route.query.id,
          account: self.numVal, //账号
          desc: self.briefVal, //简介
          mobile: self.phoneVal, //手机
          name: self.designationVal, //名称
          realName: self.nameVal //姓名
        };
      }
      taskRequest
        .providerInsertFun(JSON.stringify(obj))
        .then(data => {
          if (data.statusCode == 200) {
            this.$message({
              showClose: true,
              message: "修改成功",
              type: "success"
            });
            this.$router.push({
              path: "/home/business"
            });
          } else {
            self.$message(data.statusMessage);
          }
        })
        .catch(msg => {
          self.$message("服务器异常");
        });
    },
    //text自动撑高
    textHeigth() {
      textId.style.height = 0;
      textId.style.height = textId.scrollHeight + "px";
    }
  }
};
</script>
<style scoped>
.textBox {
  width: 350px;
  min-height: 80px;
  line-height: 24px;
  font-size: 16px;
  background: #f2f5f7;
  margin-left: 12px;
  color: #a4aab9;
  padding: 4px 8px;
  margin-right: 14px;
  resize: none;
}

.checkList {
  display: flex;
  margin-left: 200px;
  margin-top: 30px;
}

.checkName {
  width: 100px;
  height: 20px;
  text-align: right;
}

.checkUl {
  width: 420px;
  min-height: 20px;
  display: flex;
}

.checkLi {
  width: 140px;
  height: 20px;
  overflow: hidden;
}

.checkBox {
  width: 90px;
  height: 20px;
  line-height: 20px;
  margin-right: 50px;
  color: #2f3a5d;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
}

.foot {
  width: 100%;
  height: 52px;
  margin-top: 70px;
  display: flex;
  margin-left: 260px;
}

.addButton {
  width: 200px;
  height: 50px;
  background: linear-gradient(-135deg, #3296e0, #4ddaff);
  border-radius: 30px;
  font-size: 18px;
  text-align: center;
  line-height: 50px;
  color: white;
  cursor: pointer;
}

.cancelButton {
  width: 200px;
  height: 50px;
  border-radius: 30px;
  border: 1px solid #279de2;
  color: #279de2;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  font-size: 18px;
  margin-left: 30px;
}
</style>